/*
* @Author: Yejing
* @Date: 2023-06-09 10:09:43
* @LastEditors: Yejing
* @LastEditTime: 2023-06-09 17:34:12
* @Description: 展开收缩
*/
<template>
	<view class="info-status-page">
		<view class="content">
			<view class="content">
				<text class="name">{{ item.userName }}</text>
				<text ref="text" class="info" :class="isExpand?'moreActive':''">
					{{ item.comment }}
				</text>
			</view>
			<view class="time-txt" style="font-size: 20rpx;color: #ccc;">

				{{publicJS.timeZoneSwitching(item.createTime,"DD/MM/YYYY")}}
			</view>
		</view>
		<view class="more" ref="more" @click.stop="">
			<view class="like">
				<image @click="like" :key="item.alreadyLiked"
					:src="require(`@/static/images/video/comment-${~~item.alreadyLiked}.png`)"
					style="width: 40rpx;height: 40rpx;" mode="">
				</image>
				<c-number class="number" :val="item.like"></c-number>
			</view>
			<view class="" v-if="isOverflow" @click="expand">
				<span v-if="!isExpand">展开</span>
				<span v-else> 关闭</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({}),
			}
		},
		data() {
			return {
				isOverflow: false,
				isExpand: false
			};
		},
		mounted() {
			console.log(this.item,this.item.id);
			const box = this.$refs.text.$el
			if (box.scrollHeight > box.offsetHeight) {
				this.isOverflow = true
			} else {
				this.isOverflow = false
			}
		},
		methods: {
			// 展开更多
			expand(item) {
				this.$emit('expand', item)
				this.isExpand = !this.isExpand
				this.$forceUpdate()
				console.log(this.isExpand, 'this.isExpandthis.isExpandthis.isExpand');
			},
			like() {
				uni.$u.put(`/app/short/video/comments/like/${this.item.id}/${1}`).then(res => {
					this.item.like = res.data
					this.item.alreadyLiked = ~~!this.item.alreadyLiked
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-status-page {
		display: flex;
		width: calc(100% - 100rpx);

		.more {
			min-width: 60rpx;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			display: flex;

			.like {
				display: flex;
				flex-direction: column;
				align-items: center;

				/deep/ .number {
					>span {
						color: #B2B2B2 !important;
						font-size: 20rpx;
					}
				}
			}
		}

		.content {
			flex: 1;
			margin-right: 30rpx;

			.name {
				font-size: 24rpx;
				font-family: SFUIDisplay-Regular, SFUIDisplay;
				font-weight: 400;
				color: #91909A;
			}

			.info {
				font-size: 28rpx;
				font-family: SFUIDisplay-Medium, SFUIDisplay;
				font-weight: 500;
				color: #1B1D29;
				line-height: 42rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				// 弹性盒子
				display: -webkit-box;
				// 竖直排列弹性盒子中的子元素
				-webkit-box-orient: vertical;
				// 最多行数为4行
				-webkit-line-clamp: 2;
				word-break: break-all;
			}

			.moreActive {
				overflow: auto;
				display: block;
			}

			display: flex;
			flex-direction: column;
		}
	}
</style>